import React from 'react';
import { Row, Col } from 'antd';
import { IconC, FirstHeaderC, SecondHeaderC } from '../../comps';
class IconCDemo extends React.Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='图标' />
        <div>
          <SecondHeaderC title='基本使用' />
          <Row style={{ marginBottom: '20px' }} type='flex' justify='space-around' flexWrap='wrap'>
            <Col style={{ textAlign: 'center' }}>
              <IconC type={'newly'} style={{ margin: '10px' }} />
              <div>
                <span>新增</span>
              </div>
            </Col>
            <Col style={{ textAlign: 'center' }}>
              <IconC title='新增' type={'newly'} style={{ margin: '10px' }} />
              <div>
                <span>有tooltip提示</span>
              </div>
            </Col>
            <Col>
              <IconC type={'edit'} style={{ margin: '10px' }} />
              <div>
                <span>编辑</span>
              </div>
            </Col>
            <Col>
              <IconC type={'delete'} style={{ margin: '10px' }} />
              <div>
                <span>删除</span>
              </div>
            </Col>
            <Col>
              <IconC type={'download'} style={{ margin: '10px' }} />
              <div>
                <span>下载</span>
              </div>
            </Col>
            <Col>
              <IconC type={'upRegulate'} style={{ margin: '10px' }} />
              <div>
                <span>上调</span>
              </div>
            </Col>
            <Col>
              <IconC type={'downRegulate'} style={{ margin: '10px' }} />
              <div>
                <span>下调</span>
              </div>
            </Col>
            <Col>
              <IconC type={'packUp'} style={{ margin: '10px' }} />
              <div>
                <span>收起</span>
              </div>
            </Col>
            <Col>
              <IconC type={'cancle'} style={{ margin: '10px' }} />
              <div>
                <span>取消</span>
              </div>
            </Col>
            <Col>
              <IconC type={'save'} style={{ margin: '10px' }} />
              <div>
                <span>保存</span>
              </div>
            </Col>
            <Col>
              <IconC type={'money'} style={{ margin: '10px' }} />
              <div>
                <span>金额</span>
              </div>
            </Col>
            <Col style={{ textAlign: 'center' }}>
              <IconC type={'plus'} style={{ margin: '10px' }} />
              <div>
                <span>加</span>
              </div>
            </Col>
            <Col style={{ textAlign: 'center' }}>
              <IconC type={'minus'} style={{ margin: '10px' }} />
              <div>
                <span>减</span>
              </div>
            </Col>
            <Col style={{ textAlign: 'center' }}>
              <IconC type={'info'} style={{ margin: '10px' }} />
              <div>
                <span>提示</span>
              </div>
            </Col>
          </Row>
          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='自定义样式' />
            <IconC
              className='demotest'
              style={{ width: '24px', height: '24px' }}
              type={'edit'}
              onClick={(e) => {
                console.log('编辑1', e);
              }}
            />
          </div>
          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='鼠标悬停不更换图标，（默认true）' />
            <IconC
              className='demotest'
              style={{ width: '24px', height: '24px' }}
              isHover={false} //鼠标悬停是否更换图标
              type={'edit'}
              onClick={(e) => {
                console.log('编辑2', e);
              }}
            />
          </div>
          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='其他图标' />
            <Row>
              <Col>
                <IconC type={'rateMessage'} style={{ width: '36px', height: '36px', margin: '10px' }} />
                <div>
                  <span>汇率信息</span>
                </div>
              </Col>
              <Col>
                <IconC type={'rateMessageRightArrow'} style={{ width: '26px', height: '8px', margin: '10px' }} />
                <div>
                  <span>汇率信息-箭头</span>
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    );
  }
}
export default IconCDemo;
